<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue.js"></script>
</head>

<body>
    <div id="app">
        <!-- 要想拿到输入框里的值，必须通过v-model给他双向绑定一个值，这样我们在vue实例中就能拿到这个值 -->
        <input type="text" v-model="inputValue">
        <!-- 通过v-on:click绑定事件，点击后回去vue实例中找这个方法，并且自动执行该方法 -->
        <button v-on:click="handleBtnClick">提交</button>
        <ul>
            <!--通过for循环拿到list数组里的内容， 这里别忘了item加上{{}} item代表循环的每一项的内容 -->
            <li v-for="item in list">{{item}}</li>
        </ul>
    </div>

    <script>
        var app = new Vue({
            el: '#app',
            data: {
                // 与输入框绑定的inputValue对应，
                //修改vue实例中的值会影响输入框的inputValue，同样输入框的inputVlue值也会影响Vue实例中对应的值，
                //这就是双向绑定(将输入框的value值和vue实例中inputValue进行了绑定)。
                inputValue: '',
                // 定义了数组，用来存储li里面的内容
                list: ['第一课的内容', '第二课的内容']
            },
            methods: {
                // 点击按钮触发的事件
                handleBtnClick: function () {
                    // alert(this.inputValue)
                    // // 这里为啥不是app.$data.inputValue呢？
                    // //原因很简单，因为methods：是属于app这个vue实例的范围内的，所以直接用this.调用就行了，也不需要给data起别名
                    this.list.push(this.inputValue)
                    // 这一步的作用是当用户输入完后自动地将输入框清空
                    this.inputValue = ''
                }
            },
        })
    </script>

</body>

</html>